<template>
	<view class="container">
		
		<view class="bg" :style="{backgroundImage: 'url('+ $util.img('image/medical_ti_bg.png') +')'}">
			<view class="info">
			 <view class="c-base name">健康全身体检</view>
			 <view class="font-24 c-base">精选体检套餐，为您的健康保驾护航！</view>
			</view>
		</view>
		<u-navbar
		     :title="title"
		     @rightClick="rightClick"
		     :autoBack="true"
		     bgColor="transparent"
		     color="#ffffff"
		     leftIconColor="#ffffff"
		     :titleStyle="titleStyle"
		     :placeholder="true"
		 >
		 </u-navbar>
		 
		<view class="main rel">
			<!-- <view class="fill-base" style="border-radius: 20rpx 20rpx 0 0;">
				<u-tabs
				   :list="orderTabList"
				    lineWidth="30"
				    lineColor="#0C7EFF"
					@click="clickTab"
				   :activeStyle="{
				       color: '#0C7EFF',
						fontSize: '28rpx',
				       fontWeight: 'bold',
				   }"
				   :scrollable="false"
				   :inactiveStyle="{
						fontSize: '28rpx',
				       color: '#788096',
				   }"
				   >
				   </u-tabs>
			</view> -->
			<view style="padding: 20rpx 0;"></view>
			<medical-goods :medicalList="list"></medical-goods>
			<emptyData :width="empty.width" :height="empty.height" :text="empty.text" :icon="empty.icon" :marginTop="empty.marginTop" v-if="list.length == 0"></emptyData>
		</view>
		
		
		 
	</view>
</template>

<script>
	import medicalGoods from '../../components/medicalGoods/medicalGoods.vue'
	export default {
		components: {
			medicalGoods
		},
		data() {
			return {
				titleStyle: {
				  'color': '#ffffff'
				},
				title: '',
				empty: {
					width: 135,
					height: 134,
					text: '暂无数据',
					icon: '/image/emptyAddress.png',
					marginTop: 100
				},
				orderTabIndex: 0,
				orderTabList: [{
					name: '常规套餐'
				}, {
					name: '体检套餐',
				}],
				//分页数据
				list:[],
				page: 1,
			}
		},
		onLoad(e) {
		  this.getList()
		},
		onReachBottom() {
		  this.page++
		  this.getList()
		},
		methods: {
			clickTab(e) {
			  this.orderTabIndex = e.index;
			  this.page = 1
			  this.getList()
			},
			getList() {
			  this.$api.sendRequest({
			      url: "/api/health/goodslist",
			      data: {
			        page: this.page,
					page_size: 20,
			        type: 2,   //固定2 体检套餐
			      },
			      success: res => {
			        if(res.code == 0) {
						if(this.page == 1) this.list = []
						this.list = [...this.list, ...res.data.list]

						this.list.forEach(item => {
							if(item.goods_label) {
								// 判断里面是否有逗号，如果有就分割成数组
								if(item.goods_label.indexOf(',') != -1) item.goods_label = item.goods_label.split(',')
								else item.goods_label = [item.goods_label]
							}else item.goods_label = []

							if(item.goods_image) {
								var images = item.goods_image.split(',')
								item.goods_image = images[0]
							}

						});
			        } 
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.bg {
	width: 750rpx;
	height: 454rpx;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
	.info {
		text-align: left;
		padding: 200rpx 30rpx 0 30rpx;
		.name {
			font-size: 40rpx;
			font-weight: bold;
			margin-bottom: 14rpx;
		}
	}
}
.main {
	background: $color-bg;
	border-radius: 20rpx;
	margin-top: -222rpx;
}
</style>
